import React,{Component} from 'react'
import Active from './Active'
import {Affix} from 'antd'
import {NavLink,Link,withRouter} from 'react-router-dom'
import {navs} from '../../data/proList'
class Navs extends Component{
    constructor(props){
        super(props)
        this.state={
            list:navs,
            id:'',
            op:1,
            top:'128px',
            name:''
        }
    }
    enter(index){
        this.setState({
            id:index,
            op:0
        })
    }
    leave(){
        this.setState({
            op:1
        })
    }
    change(){
        if(this.state.top=='128px'){
            this.setState({
                top:'40px'
            })
        }else{
            this.setState({
                top:'128px'
            })
        }
        
    }
    tap(){
        console.log(this.props)
    }
    changeItem(val){
        console.log(val.cateName)
        this.setState({
            name:val.cateName
        })
    }
    componentDidMount(){
        console.log(navs)
    }
    render(){
        return(
            <div>
                <Affix style={{bottom:'200px'}} onChange={()=>this.change()} offsetTop={0}>
                    <ul style={{background:'black',margin:'0'}} ref="nav" className="mainNav">
                        <li><Link to="/home" onClick={()=>this.tap()}>首页</Link></li>
                        <li><Link to="/category1">品牌动向</Link></li>
                        <li><Link to="/category2">新品资讯</Link></li>
                        {this.state.list.map((v,i)=>{
                        return(<li onClick={()=>this.changeItem(v)} onMouseLeave={()=>this.leave(i)} onMouseEnter={()=>this.enter(i)} data-id={i} key={i}><NavLink to={{
                            pathname: '/proList/'+this.state.id,
                            search: '?cateId='+0,
                        }}>{v.name}</NavLink></li>)
                        })}
                        <li>客服营业时间: 9:00-18:00</li>
                    </ul>
                    
                </Affix>
                <Active top={this.state.top} ref="box" name={this.state.id} sty={this.state.op} />
            </div>
        )
    }
}

export default withRouter(Navs)